<template>
  <div>
    <!-- 门店信息 -->
    <div class="bgc-default pad-t-20 pad-l-20 pad-r-20">
      <div class="bg-color-white pad-t-7 pad-b-15 pad-l-20 pad-b-20">
        <div class="store-title-bar flex v-align-c pad-b-10">
          <!-- storeStaute为true是启用中； storeStaute为false是禁用中 -->
          <div class="store-staute" :class="storeStaute ? 'enable' : 'disable'">{{ storeStaute ? '启用中' : '禁用中' }}</div>
          <h2>{{storeInfo.storeName}}</h2>
        </div>
        <el-row :gutter="20" class="store-info-box">
          <el-col :span="6">
            <div class="pad-t-1 pad-b-1 flex v-align-t">
              <span>门店业务：</span>
              <span class="flex-item">{{storeBusinessType}}</span>
            </div>
            <div class="pad-t-1 pad-b-1 flex v-align-t">
              <span>门店电话：</span>
              <span class="flex-item">{{storeInfo.storePhone}}</span>
            </div>
            <div class="pad-t-1 pad-b-1 flex v-align-t">
              <span>门店地址：</span>
              <span
                class="flex-item">{{storeInfo.provinceName ? storeInfo.provinceName + storeInfo.cityName + storeInfo.districtName + storeInfo.storeAddress : ''}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="pad-t-1 pad-b-1 flex v-align-t">
              <span>绑定仓库：</span>
              <span class="flex-item">{{storeInfo.warehouseName}}</span>
            </div>
            <div class="pad-t-1 pad-b-1 flex v-align-t">
              <span>主管理姓名：</span>
              <span class="flex-item">{{storeInfo.administratorsName}}</span>
            </div>
            <div class="pad-t-1 pad-b-1 flex v-align-t">
              <span>主管理手机：</span>
              <span class="flex-item">{{storeInfo.administratorsPhone}}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <store-goods :storeMemberId='storeMemberId'></store-goods>
  </div>
</template>

<script>
  import StoreGoods from '@/views/warehouse/store-goods/index'
  import {
    getMemberStoreByMemberId
  } from '@/api/user/memberStore'
  export default {
    components: {
      StoreGoods
    },
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.memberId) {
        this.storeMemberId = queryParams.memberId
        this.getStoreInfo()
      }
    },
    data() {
      return {
        storeMemberId: 0,
        storeInfo: {},
        storeStaute: false,
        storeBusinessType: ''
      }
    },
    methods: {
      getStoreInfo() {
        const query = {}
        query.memberId = this.storeMemberId
        getMemberStoreByMemberId(query).then(response => {
          if (response.isError) return
          this.storeInfo = response.data
          var actions = []
          if (this.storeInfo.isHomeDelivery === 1) {
            actions.push('到家配送点')
          }
          if (this.storeInfo.isStoreExtraction === 1) {
            if (actions.length > 0) {
              actions.push(' | ')
            }
            actions.push('门店自提点')
          }
          if (this.storeInfo.isCommunityGroupExtraction === 1) {
            if (actions.length > 0) {
              actions.push(' | ')
            }
            actions.push('社区团购提货点')
          }
          this.storeBusinessType = actions.join('')
          this.storeStaute = this.storeInfo.storeState === 1
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .store-title-bar {
    .store-staute {
      font-size: 18px;
      font-weight: bold;
      background: #909399;
      padding: 0px 7px 0px 18px;
      height: 36px;
      line-height: 36px !important;
      color: #fff;
      position: relative;
      margin: 0 20px 0px -20px;

      &:before {
        content: '';
        position: absolute;
        right: -20px;
        top: 0;
        border-right: 10px solid transparent;
        border-bottom: 18px solid transparent;
        border-left: 10px solid #909399;
      }

      &:after {
        content: "";
        position: absolute;
        right: -10px;
        bottom: 0;
        border-right: 10px solid transparent;
        border-top: 10px solid transparent;
        border-bottom: 18px solid #909399;
      }

      &.disable {
        background: #ff4949;

        &:before {
          content: '';
          border-left: 10px solid #ff4949;
        }

        &:after {
          content: "";
          border-bottom: 18px solid #ff4949;
        }
      }
    }

    h2 {
      font-weight: bold;
      font-size: 20px;
      color: #323233;
      margin: 0;
      padding: 0;
    }
  }

  /deep/ .store-info-box {
    color: #323233;
    margin-left: -30px !important;

    span {
      display: inline-block;
    }

    span:first-child {
      color: #909399;
      min-width: 90px;
      text-align: right;
    }
  }
</style>
